<template>
  <div class="weather-detail-page">
    <van-nav-bar
      :title="`${city}天气详情`"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="detail-container">
      <div class="day-info">
        <div class="day-title">{{ day }}</div>
        <div class="date-info">{{ formatDate() }}</div>
      </div>
      
      <div class="weather-card">
        <div class="weather-header">
          <div class="temperature">{{ temperature }}°</div>
          <div class="condition">
            <van-icon :name="getWeatherIcon(condition)" size="40" />
            <span>{{ condition }}</span>
          </div>
        </div>
        
        <div class="weather-details">
          <div class="detail-row">
            <div class="detail-item">
              <div class="item-label">体感温度</div>
              <div class="item-value">{{ feelsLike }}°</div>
            </div>
            <div class="detail-item">
              <div class="item-label">湿度</div>
              <div class="item-value">{{ humidity }}%</div>
            </div>
          </div>
          
          <div class="detail-row">
            <div class="detail-item">
              <div class="item-label">风向</div>
              <div class="item-value">{{ windDirection }}</div>
            </div>
            <div class="detail-item">
              <div class="item-label">风速</div>
              <div class="item-value">{{ windSpeed }} km/h</div>
            </div>
          </div>
          
          <div class="detail-row">
            <div class="detail-item">
              <div class="item-label">气压</div>
              <div class="item-value">{{ pressure }} hPa</div>
            </div>
            <div class="detail-item">
              <div class="item-label">能见度</div>
              <div class="item-value">{{ visibility }} km</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="hourly-forecast">
        <div class="section-title">24小时预报</div>
        <div class="hourly-list">
          <div 
            v-for="(item, index) in hourlyForecast" 
            :key="index"
            class="hourly-item"
          >
            <div class="hour">{{ item.hour }}</div>
            <van-icon :name="getWeatherIcon(item.condition)" size="24" />
            <div class="hour-temp">{{ item.temperature }}°</div>
          </div>
        </div>
      </div>
      
      <div class="weather-chart">
        <div class="section-title">温度变化</div>
        <div class="chart-container">
          <!-- 这里可以集成图表库，如ECharts -->
          <div class="placeholder-chart">
            <div class="chart-line"></div>
            <div 
              v-for="(point, index) in temperaturePoints" 
              :key="index"
              class="chart-point"
              :style="{ left: `${index * 20}%`, bottom: `${point}%` }"
            ></div>
          </div>
        </div>
      </div>
      
      <div class="weather-tips">
        <div class="section-title">天气提示</div>
        <div class="tips-content">
          <van-icon name="info-o" />
          <div class="tip-text">{{ weatherTip }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

// 获取路由参数
const city = ref(route.params.city || '北京')
const day = ref(route.query.day || '今天')

// 天气数据
const temperature = ref(Math.floor(Math.random() * 15) + 15) // 15-30度
const condition = ref(getRandomCondition())
const feelsLike = ref(temperature.value - Math.floor(Math.random() * 3))
const humidity = ref(Math.floor(Math.random() * 30) + 50) // 50-80%
const windDirection = ref(getRandomWindDirection())
const windSpeed = ref(Math.floor(Math.random() * 20) + 5) // 5-25 km/h
const pressure = ref(Math.floor(Math.random() * 30) + 1000) // 1000-1030 hPa
const visibility = ref((Math.random() * 10 + 5).toFixed(1)) // 5-15 km

// 生成24小时预报
const hourlyForecast = ref([])
const temperaturePoints = ref([])
const weatherTip = ref(getRandomWeatherTip())

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 格式化日期
const formatDate = () => {
  const date = new Date()
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 获取随机天气状况
function getRandomCondition() {
  const conditions = ['晴', '多云', '阴', '小雨', '中雨', '大雨', '雷阵雨', '小雪', '中雪']
  return conditions[Math.floor(Math.random() * conditions.length)]
}

// 获取随机风向
function getRandomWindDirection() {
  const directions = ['东风', '南风', '西风', '北风', '东北风', '东南风', '西北风', '西南风']
  return directions[Math.floor(Math.random() * directions.length)]
}

// 获取随机天气提示
function getRandomWeatherTip() {
  const tips = [
    '今日天气晴好，适合户外活动，注意防晒。',
    '今日多云，气温适宜，适合外出游玩。',
    '今日有雨，出门请带伞，注意防滑。',
    '今日风力较大，外出注意保暖。',
    '今日空气质量良好，适合户外运动。',
    '今日温差较大，注意适当增减衣物。',
    '今日湿度较高，注意保持室内通风。',
    '今日紫外线强度较高，外出请做好防晒措施。'
  ]
  return tips[Math.floor(Math.random() * tips.length)]
}

// 根据天气状况获取图标
const getWeatherIcon = (condition) => {
  switch (condition) {
    case '晴': return 'sunny-o'
    case '多云': return 'cloud-o'
    case '阴': return 'cloud-o'
    case '小雨': return 'wap-nav'
    case '中雨': return 'wap-nav'
    case '大雨': return 'wap-nav'
    case '雷阵雨': return 'wap-nav'
    case '小雪': return 'wap-nav'
    case '中雪': return 'wap-nav'
    default: return 'sunny-o'
  }
}

// 生成24小时预报数据
const generateHourlyForecast = () => {
  const currentHour = new Date().getHours()
  hourlyForecast.value = []
  temperaturePoints.value = []
  
  for (let i = 0; i < 24; i++) {
    const hour = (currentHour + i) % 24
    const temp = temperature.value + Math.floor(Math.random() * 10) - 5 // 基础温度±5度
    
    hourlyForecast.value.push({
      hour: `${hour}:00`,
      temperature: temp,
      condition: getRandomCondition()
    })
    
    // 生成图表点位置（相对百分比）
    temperaturePoints.value.push((temp - 10) * 5) // 转换为百分比高度
  }
}

onMounted(() => {
  generateHourlyForecast()
})
</script>

<style lang="scss" scoped>
.weather-detail-page {
  min-height: 100vh;
  background-color: var(--background-color);
  
  .detail-container {
    padding: 16px;
    
    .day-info {
      margin-bottom: 16px;
      
      .day-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-color);
      }
      
      .date-info {
        font-size: 14px;
        color: var(--text-color-tertiary);
        margin-top: 4px;
      }
    }
    
    .weather-card {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-1);
      
      .weather-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        
        .temperature {
          font-size: 48px;
          font-weight: 300;
          color: var(--text-color);
        }
        
        .condition {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          span {
            margin-top: 8px;
            font-size: 16px;
            color: var(--text-color);
          }
        }
      }
      
      .weather-details {
        .detail-row {
          display: flex;
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .detail-item {
            flex: 1;
            
            .item-label {
              font-size: 14px;
              color: var(--text-color-tertiary);
              margin-bottom: 4px;
            }
            
            .item-value {
              font-size: 16px;
              color: var(--text-color);
              font-weight: 500;
            }
          }
        }
      }
    }
    
    .hourly-forecast {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-1);
      
      .section-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 16px;
      }
      
      .hourly-list {
        display: flex;
        overflow-x: auto;
        padding-bottom: 8px;
        
        &::-webkit-scrollbar {
          height: 4px;
        }
        
        &::-webkit-scrollbar-thumb {
          background-color: var(--border-color);
          border-radius: 2px;
        }
        
        .hourly-item {
          flex: 0 0 auto;
          width: 60px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 8px 4px;
          
          .hour {
            font-size: 12px;
            color: var(--text-color-secondary);
            margin-bottom: 8px;
          }
          
          .hour-temp {
            font-size: 14px;
            color: var(--text-color);
            margin-top: 8px;
          }
        }
      }
    }
    
    .weather-chart {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-1);
      
      .section-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 16px;
      }
      
      .chart-container {
        height: 200px;
        
        .placeholder-chart {
          position: relative;
          height: 100%;
          
          .chart-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary-color);
            opacity: 0.3;
            top: 50%;
            transform: translateY(-50%);
          }
          
          .chart-point {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--primary-color);
            transform: translate(-50%, 50%);
          }
        }
      }
    }
    
    .weather-tips {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow-1);
      
      .section-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 16px;
      }
      
      .tips-content {
        display: flex;
        align-items: flex-start;
        
        .van-icon {
          color: var(--primary-color);
          font-size: 18px;
          margin-right: 8px;
          margin-top: 2px;
        }
        
        .tip-text {
          flex: 1;
          font-size: 14px;
          line-height: 1.6;
          color: var(--text-color);
        }
      }
    }
  }
}
</style> 